<template>
  <div class="ruhepaiwukou-popup">
    <div class="popup-header">
      <h3>{{ featureData.outfallname || "排污口详细信息" }}</h3>
    </div>

    <div class="popup-body">

      <div class="base-info-box">
        <div class="base-info-title">
          <div class="header-title">基本信息</div>
        </div>
        <div class="base-info-grid">
          <!-- <div class="base-info-item">
            <span class="base-info-label">排口名称</span>
            <span class="base-info-value">{{ featureData.outfallname }}</span>
          </div> -->
          <div class="base-info-item">
            <span class="base-info-label">所属区县</span>
            <span class="base-info-value">{{ featureData.county }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">受纳水体</span>
            <span class="base-info-value">{{ featureData.lakename }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">经纬度</span>
            <span class="base-info-value">{{ featureData.latitude || '--' }}, {{ featureData.longitude || '--' }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">一级水功能区</span>
            <span class="base-info-value">{{ featureData.onewatername || '--' }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">二级水功能区</span>
            <span class="base-info-value">{{ featureData.twowatername || '--' }}</span>
          </div>

        </div>
        <div class="base-info-item-line margin-top-12">
          <span class="base-info-label-line">所在地址</span>
          <span class="base-info-value-line">{{ featureData.address || '--' }}</span>
        </div>
      </div>

      <div class="base-info-box">
        <div class="base-info-title">
          <div class="header-title">状态与分类</div>
        </div>
        <div class="base-info-grid">
          <div class="base-info-item">
            <span class="base-info-label">状态</span>
            <span class="base-info-value status-badge" :class="getStateClass(featureData.state)">{{
              getStateName(featureData.state) }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">排放方式</span>
            <span class="base-info-value outtype-badge" :class="getOuttypeClass(featureData.outtype)">{{
              getOuttypeName(featureData.outtype) }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">排污口一级分类</span>
            <span class="base-info-value">{{ featureData.outfallfirstclassify || '--' }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">排污口二级分类</span>
            <span class="base-info-value">{{ featureData.outfallsecondclassify || '--' }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">排污口三级分类</span>
            <span class="base-info-value">{{ featureData.outfallthirdclassify || '--' }}</span>
          </div>
          <div class="base-info-item">
            <span class="base-info-label">排水量</span>
            <span class="base-info-value">{{ featureData.displacements || '--' + '（万吨/年）' }}</span>
          </div>
        </div>
      </div>


      <div class="base-info-box">
        <div class="base-info-title">
          <div class="header-title">状态与分类</div>
        </div>
        <div class="base-info-item-line">
          <span class="base-info-label-line">批复文号</span>
          <span class="base-info-value-line">{{ featureData.wh }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 定义 props
const props = defineProps({
  featureData: {
    type: Object,
    default: () => ({})
  }
});

// 数据映射
const outtypeMap = {
  '01': '连续排放',
  '02': '间歇排放',
  '03': '其他'
};

const stateMap = {
  '0': '工业源',
  '1': '农业源',
  '2': '生活源',
  '8': '工业园区',
  '9': '其他'
};

// 获取映射值的通用方法
const getMapValue = (map, key) => map[key] || '未知';

// 获取状态名称
const getStateName = (state) => {
  return getMapValue(stateMap, state);
};

// 获取排放方式名称
const getOuttypeName = (outtype) => {
  return getMapValue(outtypeMap, outtype);
};

// 获取状态样式类
const getStateClass = (state) => {
  const classMap = {
    '0': 'industrial',
    '1': 'agricultural',
    '2': 'domestic',
    '8': 'industrial-park',
    '9': 'other'
  };
  return classMap[state] || 'unknown';
};

// 获取排放方式样式类
const getOuttypeClass = (outtype) => {
  const classMap = {
    '01': 'continuous',
    '02': 'intermittent',
    '03': 'other'
  };
  return classMap[outtype] || 'unknown';
};
</script>

<style scoped>
.ruhepaiwukou-popup {
  max-width: 100%;
  width: 100%;
  margin: 0;
  border-radius: 0;
  padding: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 设置容器高度为视口高度 */
  height: 80vh;
  /* 确保在不同设备上正常显示 */
  position: fixed;
}


/* 触摸滚动通用样式 */
.touch-scroll {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 隐藏滚动条但保持功能 */
.touch-scroll::-webkit-scrollbar {
  display: none;
}


.popup-header {
  font-size: 18px;
  font-weight: 600;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.popup-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.popup-body {
  padding: 15px;
  /* 启用垂直滚动 */
  overflow-y: auto;
  /* 占满剩余空间 */
  flex: 1;
  /* 优化iOS滚动体验 */
  -webkit-overflow-scrolling: touch;
  /* 隐藏滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* 隐藏滚动条但保持功能 */
.body::-webkit-scrollbar {
  display: none;
}


/* 基础信息卡片样式 */
.base-info-box {
  background: white;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.base-info-box:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* 标题区域样式 */
.base-info-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.sample-time {
  font-size: 14px;
  color: #7f8c8d;
  background: #ecf0f1;
  padding: 4px 12px;
  border-radius: 20px;
}

/* 信息网格布局 */
.base-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

/* 信息项样式 */
.base-info-item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.base-info-item:hover {
  background: linear-gradient(135deg, #f0f2f5, #dde1e6);
}

/* 标签和值的样式 */
.base-info-label {
  font-weight: 500;
  color: #7f8c8d;
  font-size: 12px;
}

.base-info-value {
  margin-top: 4px;
  font-weight: 700;
  color: #2c3e50;
  font-size: 14px;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  display: flex;
  height: 100%;
}

.margin-top-12 {
  margin-top: 18px;
}

.base-info-item-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.base-info-item-line:hover {
  background: linear-gradient(135deg, #f0f2f5, #dde1e6);
}

/* 标签和值的样式 */
.base-info-label-line {
  font-weight: 500;
  color: #7f8c8d;
  font-size: 12px;
}

.base-info-value-line {
  margin-left: 12px;
  font-weight: 700;
  color: #2c3e50;
  font-size: 14px;
}

/* 水质级别特殊样式 */
.base-info-value.segmentcategory {
  padding: 6px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}


/* 状态徽章样式 */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  width: fit-content;
  min-height: 32px;
}

.status-badge.industrial {
  background: linear-gradient(90deg, #3498db, #2980b9);
  color: white;
}

.status-badge.agricultural {
  background: linear-gradient(90deg, #27ae60, #219653);
  color: white;
}

.status-badge.domestic {
  background: linear-gradient(90deg, #9b59b6, #8e44ad);
  color: white;
}

.status-badge.industrial-park {
  background: linear-gradient(90deg, #f39c12, #d35400);
  color: white;
}

.status-badge.other,
.status-badge.unknown {
  background: #95a5a6;
  color: white;
}

/* 排放方式徽章样式 */
.outtype-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  width: fit-content;
  min-height: 32px;
}

.outtype-badge.continuous {
  background: linear-gradient(90deg, #27ae60, #219653);
  color: white;
}

.outtype-badge.intermittent {
  background: linear-gradient(90deg, #f39c12, #d35400);
  color: white;
}

.outtype-badge.other,
.outtype-badge.unknown {
  background: #95a5a6;
  color: white;
}
</style>